<template>
  <div id="fbx-model"></div>
</template>

<script type="module">
import * as THREE from 'three'
import {FBXLoader} from "three/examples/jsm/loaders/FBXLoader"

const OrbitControls = require('three-orbit-controls')(THREE)
export default {
  name: "FBXModel",
  data() {
    return {
      scene: '',
      light: '',
      camera: '',
      controls: '',
      renderer: '',
    }
  },
  methods: {
    //初始化three.js相关内容
    init() {
      this.scene = new THREE.Scene();
      //环境光
      this.scene.add(new THREE.AmbientLight(0x999999));
      //从正上方（不是位置）照射过来的平行光，0.45的强度
      this.light = new THREE.DirectionalLight(0xdfebff, 0.45);
      this.light.position.set(50, 200, 100);
      this.light.position.multiplyScalar(0.3);
      this.scene.add(this.light);
      //初始化相机
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      this.camera.position.set(10, 90, 65);
      this.camera.lookAt(this.scene.position);
      //初始化控制器
      this.controls = new OrbitControls(this.camera);
      this.controls.target.set(0, 0, 0);
      this.controls.minDistance = 50;
      this.controls.maxDistance = 500;
      this.controls.maxPolarAngle = Math.PI / 3;
      //是否开启鼠标右键按下之后可以拖拽平移相机的功能
      this.controls.enablePan = true;
      this.controls.update();
      //渲染
      this.renderer = new THREE.WebGLRenderer({
        alpha: true,
      });
      this.renderer.setClearColor(0x000000);
      //为了兼容高清屏幕
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(window.innerWidth, window.innerHeight);

      //给场景增加环境光
      let Ambient = new THREE.AmbientLight(0x404040, 2);
      this.scene.add(Ambient);

      //给场景添加太阳光
      let Sun = new THREE.DirectionalLight(0xffffff, 1);
      Sun.position.set(20, 20, 20);
      Sun.castShadow = true;

      //设置相机渲染面积
      Sun.shadow.camera.near = 0.01;
      Sun.shadow.camera.far = 60;
      Sun.shadow.camera.top = 22;
      Sun.shadow.camera.bottom = -22;
      Sun.shadow.camera.left = -35;
      Sun.shadow.camera.right = 35;
      // //设置阴影分辨率
      Sun.shadow.mapSize.width = 2048;  // default
      Sun.shadow.mapSize.height = 2048; // default
      //阴影限制
      Sun.shadow.radius = 1;
      this.scene.add(Sun);

      const container = document.getElementById('fbx-model');
      container.appendChild(this.renderer.domElement);
      //添加窗口监听事件（resize-onresize即窗口或框架被重新调整大小）
      window.addEventListener('resize', this.onWindowResize, false);
    },
    //窗口监听函数
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.render();
    },
    render() {
      this.renderer.render(this.scene, this.camera);
    },
    //外部模型加载函数
    loadObj() {
      let geometry = new THREE.BoxGeometry(125, 0.2, 125)
      let material = new THREE.MeshNormalMaterial()
      this.mesh = new THREE.Mesh(geometry, material)
      this.scene.add(this.mesh)

      //模型贴图
      // let texturePlante = THREE.ImageUtils.loadTexture("models/Flamingo/Flamingo_texture.png",null,function(){})

      let loader = new FBXLoader()
      loader.load(
          '/models/device/device.fbx',
          fbx => {
            // fbx.traverse(function (item) {
            //   item.material=new THREE.MeshPhongMaterial({
            //     map: texturePlante
            //   })
            //   if(item instanceof THREE.Mesh){
            //     item.castShadow = true
            //     item.receiveShadow = true
            //   }
            // })
            fbx.scale.set(0.1, 0.1, 0.1)
            // fbx.rotation.z += 10
            this.scene.add(fbx)
          },
          () => {
          },
          () => {
            console.error('failed to load FBX');
          },
      );
    }
  },
  mounted() {
    this.init();
    this.loadObj();
    this.animate();
  }
}
</script>

<style scoped>

</style>
